<!DOCTYPE html>
<html>
<head>
	<title>双飞翼布局改造</title>
	<meta charset="utf-8">
	<style type="text/css">
		html,body{
			height: 100%;
			margin: 0;
		}

		.center-content{
			margin: 0 200px;
			height: 100%;
		}

		.center{
			float: left;
			background-color: red;
			height: 100%;
			width: 100%;
		}

		.left{
			float: left;
			background-color: blue;
			height: 100%;
			width: 200px;
			margin-left: -100%;
			overflow: auto;
		}

		.right{
			float: left;
			background-color: grey;
			height: 100%;
			width: 200px;
			margin-left: -200px;
			overflow: auto;
		}

		.center-right-bottom{
			position: fixed;
			left: 200px;
			bottom: 20px;
			right: 0;
			background-color: green;
			height: 50px;
		}

		.left-content,.right-content{
			width: 100%;
			min-height: 1000px;

		}

		.real-bottom{
			position: fixed;
			left: 0;
			bottom: 0;
			right: 0;
			background-color: orange;
			height: 20px;
		}
	</style>
</head>
<body>
	<div class="center">
		<div class="center-content">
			000
		</div>
	</div>
	<div class="left">
		<div class="left-content">
			111
		</div>
	</div>
	<div class="right">
		<div class="right-content">
			222
		</div>
	</div>
	<div class="center-right-bottom">
		333
	</div>

	<div class="real-bottom">
		444
	</div>
</body>
</html>